<template>
	<view class="pageV">
		<!-- 结算 -->
		<u-navbar title="结算" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="centV">
			<view class="topV">
				<view class="addressV" @click="onAddressClick()">
					<view class="addressTv" v-if="address">
						{{address.name}} {{address.mobile}}
						{{address.province.name}}-
						{{address.city.name}}-
						{{address.area.name}}
						{{address.address}}
					</view>
					<view class="addressTv" v-else>请选择收货地址</view>
					<u-icon name="arrow-right" color="#939393" size="13"></u-icon>
				</view>
			</view>

			<view class="info">
				<view class="infoBg" v-if="item.isset" v-for="(item,index) in listData" :key="index">
					<image class="infoIv" :src="item.image"></image>
					<view class="infoRightV">
						<view class="infoTv1">{{item.title}}</view>
						<view class="infoTv2" v-if="false">规格：</view>
						<view class="infoTv2" v-if="false">规格：默认</view>
						<view class="infoVV">
							<view class="infoTv3">x{{item.number}}</view>
							<view class="infoTv4">¥{{item.sales_price*item.number}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="topV">
				<view class="addressV">
					<view class="addressTv">运费</view>
					<view class="yunfeiTv1" v-if="yunTv">全国包邮</view>
					<view class="yunfeiTv2" v-else>请先选择收货地址</view>
				</view>
			</view>

			<view class="beizhuV">
				<view class="beizhuTv1">买家留言</view>
				<view class="beizhuTv2">
					<input placeholder="请填写备注" v-model="goosBeiZhu" />
				</view>
			</view>

		</view>
		<view class="bottomV">
			<view class="bottomLeftV">
				<view class="bottomTv1">共{{getOrderNum()}}件 合计 ：</view>
				<view class="bottomTv2">¥{{getOrderMoney()}}</view>
			</view>
			<view class="sumTv" @click="getShopOrderSubmit">去支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				yunTv: '32', //运费
				listData:[],
				address:null,//地址
			}
		},
		onLoad(e) {
			this.listData = JSON.parse(e.list)
			console.log("-----", JSON.stringify(this.listData))
		},
		methods: {
			getOrderNum(){
				let num = 0;
				this.listData.map((item, index) => {
					if (item.isset) {
						num = num+item.number
					}
				})
				return num
			},
			getOrderMoney(){
				let money = 0;
				this.listData.map((item, index) => {
					if (item.isset) {
						money = money+(item.sales_price*item.number)
					}
				})
				return money
			},
			onAddressClick() {
				this.$u.route({
					url: "/shop/addressAdd/address",
					params: {
						type: 'selete',
					}
				})
			},
			otherFun(item) { //选择地址回调
				let dat = JSON.parse(item);
				console.log("----", item);
				this.address = dat;
				// this.onYunFei(dat.city.id);
			},
			onYunFei(id) {
				this.$api.getShopDelivery({
					city_id: id
				}).then((res) => {

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取失败" : e.msg)
				})
			},
			getShopOrderSubmit() {
				if (!this.address) {
					uni.$u.toast("请选择地址")
					return
				}
				uni.showLoading({
					title: "提交中"
				})
				let shopId = [];
				let shopNum = [];
				let shopSpec = [];
				this.listData.map((item, index) => {
					if (item.isset) {
						shopId.push(item.product_id);
						shopNum.push(item.number);
						shopSpec.push(item.spec?item.spec:" ");
						
					}
				})
				this.$api.getShopOrderSubmit({
					coupon_id: 0, //优惠券
					product_id: shopId.join(","),
					number: shopNum.join(","),
					spec: shopSpec.join(","),
					city_id: this.address.city.id,
					address_id: this.address.id,
					delivery_id: "32",
					remark: this.goosBeiZhu
				}).then((res) => {
					uni.hideLoading();
					this.pay(res.order_id);
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast(e.msg === undefined ? "提交失败" : e.msg)
				})
			},
			pay(orderid) {
				this.$api.getShoPay(
					"", {
						params: {
							order_id: orderid,
						}
					}).then((res) => {
					this.payOrder(res, orderid);
				}).catch((e) => {
					uni.$u.toast("支付失败");
				})
			},
			payOrder(payData, orderid) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonce_str,
					package: "prepay_id="+payData.prepay_id,
					signType: "MD5",
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("支付成功");
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.pageV {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.centV {
		flex: 1;
		padding-bottom: 120rpx;
	}

	.topV {
		background: #383838;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}

	.addressV {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.addressIv {
		width: 32rpx;
		height: 32rpx;
	}

	.addressTv {
		font-size: 32rpx;
		color: #E8E8E8;
		margin-left: 20rpx;
	}

	.bottomV {
		width: 100%;
		height: 98rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		background-color: #000000;
	}

	.info {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		background: #383838;
		border-radius: 20rpx;
	}
	
	.infoBg{
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.infoIv {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		background-color: antiquewhite;
	}

	.infoRightV {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin-left: 20rpx;
		flex: 1;
	}

	.infoTv1 {
		font-size: 28rpx;
		color: #fff;
	}

	.infoVV {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.infoTv2 {
		font-size: 28rpx;
		color: #939393;
	}

	.infoTv3 {
		font-size: 28rpx;
		color: #939393;
	}

	.infoTv4 {
		font-size: 30rpx;
		color: #E6A5B4;
	}

	.yunfeiTv2 {
		font-size: 28rpx;
		color: #939393;
	}

	.yunfeiTv1 {
		font-size: 28rpx;
		color: #fff;
	}

	.beizhuV {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		background: #383838;
		border-radius: 20rpx;
	}

	.beizhuTv1 {
		font-size: 32rpx;
		color: #fff;
	}

	.beizhuTv2 {
		margin-left: 37rpx;

		input {
			color: #fff;
		}
	}










	.bottomLeftV {
		flex: 0.6;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000;
	}

	.bottomTv1 {
		font-size: 28rpx;
		color: #939393;
	}

	.bottomTv2 {
		font-size: 36rpx;
		color: #E6A5B4;
	}

	.sumTv {
		flex: 0.4;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #CEF743;
		font-size: 32rpx;
		color: #333737;
	}
</style>
